import React, { useState, useEffect } from 'react'
import './index.css'
import axios from 'axios'
import { BrowserRouter as Router, Route, Routes, useNavigate } from 'react-router-dom'
export default function Index() {
    const navgiate = useNavigate()
    const [pei, setPei] = useState([])
    const [shangtype, setShangtype] = useState([])
    const [list, setList] = useState([])
    const [is_mo, setIs_mo] = useState(false)
    const [is_typeall, setIs_typeall] = useState(false)
    const [is_Pei, setIs_pei] = useState(false)
    const [s_km, setKm] = useState(-1)
    const [s_shangtype, setS_shangtype] = useState('')
    const [s_pei, setS_Pei] = useState('')
    const getType = () => {
        axios.get(`http://localhost:3000/shangtype`).then(res => {
            let { code, data } = res.data
            setShangtype(data)
        })
    }
    const getpei = () => {
        axios.get(`http://localhost:3000/pei`).then(res => {
            let { code, data } = res.data
            setPei(data)
        })
    }
    const getdianpu = () => {
        axios.get(`http://localhost:3000/dianpu?s_km=${s_km}&s_shangtype=${s_shangtype}&s_pei=${s_pei}`).then(res => {
            let { code, data } = res.data
            setList(data)

        })
    }
    const chong = () => {
        setIs_pei(false)
        setS_Pei('')
        setIs_typeall(false)
        setS_shangtype('')
        setIs_mo(false)
        setKm(-1)
    }
    const search = () => {
        setIs_pei(false)
        setIs_typeall(false)
        setIs_mo(false)
        getdianpu()
    }
    const alla = () => {
        setIs_typeall('')
        setIs_pei('')
        setIs_mo(-1)
        getdianpu()
    }
    useEffect(() => {
        getType()
        getpei()
        getdianpu()
    }, [])
    return (
        <div>
            <nav className='main'>
                <div className='header'>
                    <span style={{ fontSize: '20px' }}>📍佛山</span>
                    <span style={{ fontSize: '34px' }}>美团点餐</span>
                    <span></span>
                </div>
                <div className='jinbu'>
                    <span onClick={() => { setIs_mo(!is_mo) }}>默认排序&nbsp;&nbsp;V</span>
                    <span onClick={() => { setIs_typeall(!is_typeall) }}>全部美食&nbsp;&nbsp;V</span>
                    <span onClick={() => { setIs_pei(!is_Pei) }}>筛选&nbsp;&nbsp;V</span>
                </div>
                <div className={is_Pei ? "zhendezuile" : 'no'}>
                    <div className='shailss'>
                        <span>上架服务</span><br />
                        <div style={{ display: 'flex', padding: '15px' }}>
                            {pei.map((item, index) => {
                                return <div key={item._id} style={{ padding: '10px' }}>
                                    <span onClick={() => { setS_Pei(item._id) }}>{item.p_name}</span>
                                </div>
                            })}
                            <div><button onClick={() => { chong() }}>重置</button>
                                <button onClick={() => { search() }}>确定</button></div>
                        </div>

                    </div>
                </div>
                <div className={is_typeall ? 'allone' : 'no'}>
                    <div>
                        <span onClick={() => { alla() }}>全部美食</span><br />
                        <div className='leo'>
                            {shangtype.map(item => {
                                return <div key={item._id}>
                                    <li onClick={() => { setS_shangtype(item._id) }}>{item.cai_name}</li>
                                </div>
                            })}
                            <div><button onClick={() => { chong() }}>重置</button>
                                <button onClick={() => { search() }}>确定</button></div>
                        </div>
                    </div>
                </div>
                <div className={is_mo ? 'leooo' : 'no'}>
                    <div  className='leo'>
                    <span style={{ fontSize: '24px' }} onClick={()=>{setKm(1)}}>默认排序</span><br/>
                    <span style={{ fontSize: '24px' }} onClick={()=>{setKm(-1)}}>离我最近</span><br/>
                    <button onClick={() => { chong() }}>重置</button>
                    <button onClick={() => { search() }}>确定</button>
                    </div>
                </div>
                <div>
                    {list.map((item, index) => {
                        return <div key={item._id}>
                            <div className='listfen' onClick={()=>{navgiate(`/shop?id=${item._id}&name=${item.name}`)}}>
                                <img src={item.img} alt="" style={{ width: '100px', height: '100px' }} />
                                <span className='om'>
                                    <span>
                                        <span style={{ fontSize: '18px' }}>{item.name}</span><br /><br /><br />
                                        <span>{item.diqu}</span>
                                    </span>
                                    <span>
                                        {item.Km}km
                                    </span>
                                </span>
                            </div>
                        </div>
                    })}
                </div>
            </nav>
        </div>
    )
}